<template>
  <g2-container>
    <el-row :gutter="20">
      <el-col :span="20">
        <el-card>
          <g2UserQuery></g2UserQuery>
          <g2UserMain></g2UserMain>
          <g2UserFooter></g2UserFooter>
        </el-card>
      </el-col>
      <el-col :span="4">
        <g2UserTips></g2UserTips>
      </el-col>
    </el-row>
  </g2-container>
</template>

<script>
import g2UserQuery from "./components/user-query/index.vue";
import g2UserMain from "./components/user-main/index.vue";
import g2UserFooter from "./components/user-footer/index.vue";
import g2UserTips from "./components/user-tips/index.vue";

export default {
  // name 值和本页的 $route.name 一致才可以缓存页面
  name: "g2Article",
  components: {
    g2UserQuery,
    g2UserMain,
    g2UserFooter,
    g2UserTips
  },
  data() {
    return {
      table: [],
      loading: false,
      page: {
        current: 1,
        size: 100,
        total: 0
      }
    };
  },
  methods: {
    handlePaginationChange(val) {
      this.$notify({
        title: "分页变化",
        message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
      });
      this.page = val;
      // nextTick 只是为了优化示例中 notify 的显示
      this.$nextTick(() => {
        this.$refs.header.handleFormSubmit();
      });
    },
    handleSubmit(form) {
      this.loading = true;
      this.$notify({
        title: "开始请求模拟表格数据"
      });

      this.$store.dispatch("g2/user/getUserByPage").then();
    }
  }
};
</script>
